{layout name="layout2" /}
<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #editor-box{
      display:flex;
      justify-content:center;
      padding: 40px;
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { 
      box-shadow:0 0 5px rgba(0,0,0,0.5);
      width:375px;
      height: 500px; 
      
  }
</style>
<style>
    .layui-form-label {
        color: #6a6f6c;
    }
    .goods-li {
        float: left;
        opacity: 1;
        position: relative;
    }

    .goods-img {
        width: 80px;
        height: 80px;
        padding: 4px;
    }
    .goods-img-del-x {
        position: absolute;
        z-index: 100;
        top: -4px;
        right: -2px;
        width: 20px;
        height: 20px;
        font-size: 16px;
        line-height: 16px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: hsla(0, 0%, 60%, .6);
        border-radius: 10px;
    }
    #image{
        left:110px;
    }
    #notice{ left:110px;}
</style>
<div class="layui-form" lay-filter="layuiadmin-form-category" id="layuiadmin-form-category" style="padding: 20px 30px 0 0;">
    <input type="hidden" value="0" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">*</font>文章标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-verType="tips" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">*</font>文章分类</label>
        <div class="layui-input-block">
            <select name="cid"  placeholder="请选择文章分类" >
                <option value="0">请选择分类</option>
                {foreach $category_list as $val}
                <option value="{$val['id']}">{$val['name']}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <!--<div class="layui-form-item">-->
    <!--    <label class="layui-form-label">文章简介</label>-->
    <!--    <div class="layui-input-block">-->
    <!--        <input type="text"   name="synopsis"  placeholder="请输入文章简介" class="layui-input">-->
    <!--    </div>-->
    <!--</div>-->
    <input type="hidden"   name="synopsis"  placeholder="请输入文章简介" class="layui-input">
    <div class="layui-form-item">
        <label class="layui-form-label">文章话题</label>
        <div class="layui-input-block">
            <input type="text"  name="topic"  placeholder="请输入文章话题" class="layui-input">
        </div>
    </div>
    <div class="goods-img-add-hide layui-hide"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章封面图</label>
        <div class="layui-input-inline">
            <div class="" style="height:80px;line-height:80px">
                <input name="image" type="hidden" value="">
                <div class="goods-img-add"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class=" layui-form-mid layui-word-aux" id="image">建议尺寸：500*500像素</label>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label">商品公告</label>
        <div class="layui-input-inline" id="" >
            <input type="radio" name="is_notice" lay-filter="is_notice" style="width: 500px" value=1 title="是"  checked >
            <input type="radio" name="is_notice" lay-filter="is_notice" style="width: 500px" value=0 title="否">
        </div>
        <div class="layui-form-item">
            <label class=" layui-form-mid layui-word-aux" id="notice">商城公告会在商城首页的新闻速递显示</label>
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">文章简介</label>-->
<!--        <div class="layui-input-block">-->
<!--            <textarea name="synopsis" required lay-verify="required" lay-verType="tips" placeholder="请输入文章简介" class="layui-textarea"></textarea>-->
<!--        </div>-->
<!--    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">文章排序</label>
        <div class="layui-input-block">
            <input type="number"  name="sort"  placeholder="请输入排序" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章状态</label>
        <div class="layui-input-inline"  >
            <input type="radio" name="is_show" lay-filter="is_show" style="width: 500px" value=1 title="显示" checked >
            <input type="radio" name="is_show" lay-filter="is_show" style="width: 500px" value=0 title="隐藏">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章内容</label>
        <textarea id="content" name="content" id="content" lay-verify="content"  class="field-content layui-hide"></textarea>
        <div class="layui-input-block">
            <div id="editor—wrapper">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-box">
                    <div id="editor-container" ><!-- 编辑器 --></div>
                </div>
                
            </div>
        </div>
        
        <!--<div class="layui-input-block">-->
        <!--    <textarea  name="content" id="content" lay-verify="content"  class="field-content"></textarea>-->
        <!--</div>-->
            <!--<textarea  name="content" id="content" lay-verify="content"  class="field-content layui-hide"></textarea>-->
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="add-article-submit" id="add-article-submit" value="确认">
    </div>
</div>

<script>
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','likeedit','like'], function(){
        var $ = layui.$
            ,form = layui.form
            ,like = layui.like
            ,likeedit = layui.likeedit;
        // //富文本上传图片
        // likeedit.set({
        //     uploadImage: {
        //         url: "{:url('file/image')}",
        //         type: 'post'
        //     }
        // })
        // var content = likeedit.build('content'); //建立编辑器
        // 同步编辑器内容到某个 input 或 textarea  
        function syncEditorContentToInput() {  
            var contentHtml = editor.txt.html();  
            document.getElementById('contentInput').value = contentHtml;  
        } 
        form.verify({
            content: function() {
                return false
                likeedit.sync(content)
            }
        })
        like.imageUpload('.goods-img-add', function (uri, element) {
            if(uri.length>1){
                layer.msg('最多最能选中1张图片');
                return;
            }
            if(useWang){
                console.log(uri)
                editor.restoreSelection() // 恢复选区
        //   editor.insertText(text)
        //   editor.insertText(' ')
          const node = { type: 'image',src: uri, children: [{ text: '' }] }
            editor.insertNode(node)
                return useWang = false
            }
            var html = '<div class="goods-li">\n' +
                '<img class="goods-img" ' +
                'src="' + uri[0] + '">' +
                '<a class="goods-img-del-x">x</a>' +
                '</div>';
            element.prev().val(like.getUrlFileName(uri[0], '{$storageUrl}'));
            element.parent().append(html);
            element.css('display','none');
        }, true);
        //上传图片
        // like.imageUpload('.goods-img-add-hide', function (uri, element) {
        //     if(uri.length>1){
        //         layer.msg('最多最能选中1张图片');
        //         return;
        //     }
        //     console.log(uri)
        // }, true);
        
        //删除图片
        $(document).on('click', '.goods-img-del-x', function () {
            $(this).parent().siblings('input').val('');
            $(this).parent().prev().css('display','block');
            $(this).parent().remove();
        });
        //显示图片
        $(document).on('click', '.goods-img', function () {
            var image = $(this).attr('src');
            like.showImg(image,600);
        });
        
        let useWang = false
        $(document).ready(function() {  
            $('button[data-menu-key="myMenu"]').on('click', function(e) {  
                // 这里编写点击事件的处理逻辑  
                useWang = true
                e.preventDefault()
                console.log('我被点击了')
                $('.upload-image-a').trigger('click');
                
        });  
});
    });
</script>
<script>
const { createEditor, createToolbar } = window.wangEditor
const E = window.wangEditor
// Extend menu
    class MyMenu {
      constructor() {
        this.title = '插入图片'
        this.iconSvg = '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>'
        this.tag = 'button'
        this.showModal = true
        this.modalWidth = 300
      }
      getValue(editor) {
        return ''
      }
      isActive(editor) {
          console.log('activate')
        return false // or true
      }
      isDisabled(editor) {
        return false // or true
      }
      exec(editor, value) {
        // do nothing 什么都不用做
      }
      getModalPositionNode(editor) {
        return null // modal 依据选区定位
      }
      getModalContentElem(editor) {
          window.myEditor  = editor
         return ''
        const $container = $('<div></div>')

        const inputId = `input-${Math.random().toString(16).slice(-8)}`
        const buttonId = `button-${Math.random().toString(16).slice(-8)}`

        const $inputContainer = $(`<label class="babel-container">
            <span>Text</span>
            <input type="text" id="${inputId}" value="hello world">
          </label>`)
        const $buttonContainer = $(`<div class="button-container">
            <button id="${buttonId}">insert text</button>
          </div>`)

        $container.append($inputContainer).append($buttonContainer)

        $container.on('click', `#${buttonId}`, e => {
          e.preventDefault()

          const text = $(`#${inputId}`).val()
          if (!text) return

          editor.restoreSelection() // 恢复选区
        //   editor.insertText(text)
        //   editor.insertText(' ')
          let uri = 'http://salon.woaiba.com/uploads/images/20240410140434a9be50727.jpg'
          const node = { type: 'image',src: uri, children: [{ text: '' }] }
            editor.insertNode(node)
        })

        setTimeout(() => {
          $(`#${inputId}`).focus()
        })

        return $container[0]

        // PS：也可以把 $container 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
      }
    }
    const myMenuConf = {
      key: 'myMenu',
      factory() {
        return new MyMenu()
      }
    }
    E.Boot.registerMenu(myMenuConf)

const editorConfig = {
    placeholder: '请创作内容',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      var textarea = document.getElementById('content');  
      
    // 设置 textarea 的内容  
    textarea.value = html;  
      // 也可以同步到 <textarea>
    }
}

const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
})

const toolbarConfig ={
        insertKeys: {
          index: 0,
          keys: ['myMenu'], // show menu in toolbar
        }
      }

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})


</script>